<template>
    <view>
        <!-- head -->
        <view class="shadow-[0_5px_7px_-3px_rgba(0,0,0,0.25)] max-md:hidden">
            <view class="navbar-container-end">
                <view class="navbar-text" @click="onAccount">{{ $t("common.head.text1") }}</view>
                <view class="navbar-text" @click="onBlocks">{{ $t("common.head.text2") }}</view>
                <view class="navbar-text" @click="onTransactions">{{ $t("common.head.text3") }}</view>
                <view class="navbar-button"> {{ $t("common.head.button") }} </view>
            </view>
        </view>
        <!-- banner -->
        <view class="banner">
            <div class="banner-container">
                <view class="text-[30px] text-[#fff] font-bold">{{ $t("index.banner.title") }}</view>
                <view class="banner-search">
                    <v-search />
                </view>
            </div>
        </view>
        <!-- statistics -->
        <view class="statistics">
            <view class="col-span-2 grid grid-cols-3 max-md:grid-cols-1 max-md:col-span-1">
                <view class="flex flex-col justify-center">
                    <v-statistics-item :data="overviewData.statistics1" />
                    <v-statistics-item :data="overviewData.statistics2" />
                </view>
                <view class="flex flex-col justify-center">
                    <v-statistics-item :data="overviewData.statistics3" />
                    <v-statistics-item :data="overviewData.statistics4" />
                </view>
                <view class="flex flex-col justify-center">
                    <v-statistics-item :data="overviewData.statistics5" />
                    <v-statistics-item :data="overviewData.statistics6" />
                </view>
            </view>
            <view class="h-[250px] py-[5px] max-md:hidden">
                <qiun-data-charts type="line" :opts="chartOpts" :chartData="overviewData.chart" />
            </view>
        </view>
        <!-- list -->
        <view class="data-list">
            <!-- list1 -->
            <view class="px-[20px] pt-[25px]">
                <view class="flex justify-between items-center">
                    <view class="flex items-center gap-[10px]">
                        <up-icon name="/static/fire.svg" size="16" />
                        <view class="font-bold text-[#000] text-[16px]">{{ $t("index.list1.title") }}</view>
                    </view>
                    <view class="data-list-more" @click="onBlocks">
                        <text>{{ $t("index.list1.more") }}</text>
                    </view>
                </view>
                <view class="divider" />
                <view v-for="(v, i) in blocksList" :key="i" class="data-list-container">
                    <view class="flex items-center gap-[15px]">
                        <view class="p-[15px] bg-[#F8FAFD] font-bold max-md:p-0 max-md:font-normal">BK</view>
                        <view class="flex flex-col text-[12px] max-md:flex-row gap-[5px] max-md:gap-[10px]">
                            <view class="text-[#4285F4] text-[14px] cursor-pointer" @click="onBlock(v.height)">
                                {{ v.height }}
                            </view>
                            <view class="text-[#79848D]">{{ timeAgo(v.time, serverTimestamp) }}</view>
                        </view>
                    </view>
                    <view class="flex flex-col justify-start text-[13px] gap-[5px]">
                        <view class="flex items-center gap-[5px] max-md:gap-[10px]">
                            <text class="font-bold">{{ $t("index.list.validatedBy") }}</text>
                            <text class="text-[#4285F4] cursor-pointer" @click="onAddress(v.witness)">
                                {{ crop(v.witness, 15) }}
                            </text>
                        </view>
                        <view class="flex items-center text-[#79848D] gap-[5px] max-md:gap-[10px]">
                            <text class="text-[#4285F4] cursor-pointer">{{ v.ntx }} txns </text>
                            <text>{{ $t("index.list.in3secs") }}</text>
                            <text class="data-list-quantity hidden max-md:inline-block">
                                {{ (v.reward / 100000000).toFixed(4) }} HNY
                            </text>
                        </view>
                    </view>
                    <view class="data-list-quantity max-md:hidden">{{ (v.reward / 100000000).toFixed(4) }} HNY</view>
                </view>
            </view>
            <!-- list2 -->
            <view class="px-[20px] pt-[25px]">
                <view class="flex justify-between items-center">
                    <view class="flex items-center gap-[10px]">
                        <up-icon name="/static/new.svg" size="20" />
                        <view class="font-bold text-[#000] text-[16px]">
                            {{ $t("index.list2.title") }}
                        </view>
                    </view>
                    <view class="data-list-more" @click="onTransactions">
                        <text>{{ $t("index.list2.more") }}</text>
                    </view>
                </view>
                <view class="divider" />
                <view v-for="(v, i) in transactionsList" :key="i" class="data-list-container">
                    <view class="flex items-center gap-[15px]">
                        <view class="p-[15px] bg-[#F8FAFD] font-bold max-md:p-0 max-md:font-normal">TX</view>
                        <view class="flex flex-col gap-[5px] text-[12px] max-md:flex-row max-md:gap-[10px]">
                            <view
                                class="text-[#4285F4] text-[14px] cursor-pointer"
                                @click="onTransaction(v.txinfo.hash)"
                            >
                                {{ crop(v.txinfo.hash, 13) }}
                            </view>
                            <view class="text-[#79848D]">{{ timeAgo(v.timestamp, serverTimestamp) }}</view>
                        </view>
                    </view>
                    <view class="flex flex-col justify-start text-[12px] gap-[5px]">
                        <view
                            class="flex items-center gap-[5px] max-md:gap-[10px]"
                            @click="onAddress(v.txinfo.vout[0].address)"
                        >
                            <text class="font-bold text-[14px]">{{ $t("index.list.from") }} </text>
                            <text class="text-[#4285F4] cursor-pointer">
                                {{ crop(v.txinfo.vout[0].address, 13) }}
                            </text>
                        </view>
                        <view
                            class="flex items-center text-[#79848D] gap-[5px] max-md:gap-[10px]"
                            @click="onAddress(v.txinfo.vin[0].addr)"
                        >
                            <text class="font-bold">{{ $t("index.list.to") }} </text>
                            <text class="text-[#4285F4] cursor-pointer">
                                {{ crop(v.txinfo.vin[0].addr, 13) }}
                            </text>
                            <!-- 小尺寸屏幕显示 -->
                            <text class="data-list-quantity hidden max-md:inline-block">
                                {{ (v.txinfo.reward / 100000000).toFixed(4) }} HNY
                            </text>
                        </view>
                    </view>
                    <!-- 小尺寸屏幕隐藏 -->
                    <view class="data-list-quantity max-md:hidden">
                        {{ (v.txinfo.reward / 100000000).toFixed(4) }} HNY
                    </view>
                </view>
            </view>
            <!-- list3 -->
            <view class="px-[20px] pt-[25px] hidden max-md:block">
                <view class="flex justify-between items-center">
                    <view class="flex items-center gap-[10px]">
                        <up-icon name="/static/new2.svg" size="18" />
                        <view class="font-bold text-[#000] text-[16px]">
                            {{ $t("common.head.text1") }}
                        </view>
                    </view>
                    <view class="data-list-more" @click="onAccount">
                        <text>{{ $t("account.mobile.viewAll") }}</text>
                    </view>
                </view>
                <view class="divider" />
                <view v-for="(v, i) in accountsList" :key="i" class="data-list-container text-[13px]">
                    <view class="flex items-center gap-[15px] text-[#5A6773]">
                        <view class="bg-[#F8FAFD]">{{ $t("account.table.col1") }}</view>
                        <view class="text-[#79848D]">{{ v.id }}</view>
                    </view>
                    <view class="flex items-center gap-[15px]">
                        <view class="bg-[#F8FAFD]">{{ $t("account.table.col2") }}</view>
                        <view class="text-[#4285F4] cursor-pointer" @click="onAddress(v.address)">
                            {{ crop(v.address, 13) }}
                        </view>
                    </view>
                    <view class="flex items-center gap-[15px]">
                        <view class="bg-[#F8FAFD]">{{ $t("account.table.col6") }}</view>
                        <view class="text-[#79848D]">{{ v.created_at }}</view>
                    </view>
                    <view class="flex items-center gap-[15px]">
                        <view class="bg-[#F8FAFD]">{{ $t("account.table.col3") }}</view>
                        <view class="text-[#79848D]">{{ v.balance }} HNY</view>
                    </view>
                    <view class="flex items-center gap-[15px]">
                        <view class="bg-[#F8FAFD]">{{ $t("account.table.col4") }}</view>
                        <view class="text-[#79848D]">{{ v.txn }}</view>
                    </view>
                    <view class="flex items-center gap-[15px]">
                        <view class="bg-[#F8FAFD]">{{ $t("account.table.col5") }}</view>
                        <view :class="v.is_contract ? 'text-[#52C41A]' : 'text-[#5A6773]'">
                            {{ v.is_contract ? $t("account.table.yes") : $t("account.table.no") }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- footer -->
        <v-footer />
    </view>
</template>

<script setup>
import { computed, ref } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { getBlocksList, getTransactionsList, getOverviewData, getAccountsList } from "@/api/common"
import useAppStore from "@/stores/app"
import { timeAgo, crop, navigateTo, chartHandle } from "@/utils/tools"
import { useI18n } from "vue-i18n"

const appStore = useAppStore()
const { t } = useI18n()

const serverTimestamp = ref(0)
const overviewData = ref({})
const blocksList = ref({})
const transactionsList = ref({})
const accountsList = ref({})
const price = computed(() => appStore.cacheData.price)
const cap = computed(() => appStore.cacheData.cap)
const fullCap = computed(() => appStore.cacheData.fullCap)

const chartOpts = {
    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: [10, 10, 0, 10],
    enableScroll: false,
    legend: { show: false },
    xAxis: { disableGrid: true },
    yAxis: { gridType: "dash", dashLength: 2 },
    extra: {
        line: {
            type: "curve",
            width: 2,
            activeType: "none"
        }
    }
}

const getOverviewDataFunc = async () => {
    try {
        const res = await getOverviewData()
        appStore.updatePrice(res.price)
        appStore.updateCap(res.market_cap)
        appStore.updateFullCap(res.full_market_cap)
        const { categories, series } = chartHandle(res.transactions_statistics)
        overviewData.value = {
            statistics1: {
                data1: "/static/price.svg",
                data2: t("index.overview.statistics1.data2"),
                data3: `$${price.value.nowPrice}`,
                data4: "",
                data5: `${price.value.trendDirectionSymbol} ${price.value.risePercentage}%`,
                data5_color: price.value.risePercentageColor
            },
            statistics2: {
                data1: "/static/cap.svg",
                data2: t("index.overview.statistics2.data2"),
                data3: `$${cap.value.nowCap.toFixed(4)}`,
                data4: "",
                data5: `${cap.value.trendDirectionSymbol} ${cap.value.risePercentage}%`,
                data5_color: cap.value.risePercentageColor
            },
            statistics3: {
                data1: "/static/block.svg",
                data2: t("index.overview.statistics3.data2"),
                data3: res.latests_block,
                data4: `（${timeAgo(res.latests_block_time)}）`,
                data5: "",
                data5_color: ""
            },
            statistics4: {
                data1: "/static/cap2.svg",
                data2: t("index.overview.statistics5.data2"),
                data3: `$${fullCap.value.nowFullCap.toFixed(4)}`,
                data4: "",
                data5: `${fullCap.value.trendDirectionSymbol}${fullCap.value.risePercentage}%`,
                data5_color: fullCap.value.risePercentageColor
            },
            statistics5: {
                data1: "/static/buy.svg",
                data2: t("index.overview.statistics4.data2"),
                data3: res.transaction,
                data4: "",
                data5: "",
                data5_color: ""
            },
            statistics6: {
                data1: "/static/wallet.svg",
                data2: t("index.overview.statistics6.data2"),
                data3: res.account_count,
                data4: "",
                data5: "",
                data5_color: ""
            },
            chart: {
                categories: categories,
                series: series
            }
        }
    } catch (error) {
        console.log(error)
    }
}

const getBlocksListFunc = async () => {
    try {
        const { list, timestamp } = await getBlocksList({ p: 1, ps: 10 })
        blocksList.value = list
        serverTimestamp.value = timestamp
    } catch (error) {
        console.log(error)
    }
}

const getTransactionsListFunc = async () => {
    try {
        const { list } = await getTransactionsList({ p: 1, ps: 10 })
        transactionsList.value = list
    } catch (error) {
        console.log(error)
    }
}

const getAccountsListFunc = async () => {
    try {
        const { list } = await getAccountsList({ p: 1, ps: 10 })
        accountsList.value = list.map((v) => {
            return {
                ...v,
                created_at: v.created_at.replace("T", " ").replace("Z", "")
            }
        })
    } catch (error) {
        console.log(error)
    }
}

const onAccount = () => {
    navigateTo(`account`)
}

const onBlocks = () => {
    navigateTo(`blocks`)
}

const onBlock = (height) => {
    navigateTo(`block?height=${height}`)
}

const onTransactions = () => {
    navigateTo(`transactions`)
}

const onTransaction = (tx) => {
    navigateTo(`transaction?tx=${tx}`)
}

const onAddress = (address) => {
    navigateTo(`address?address=${address}`)
}

onLoad(async () => {
    getOverviewDataFunc()
    getBlocksListFunc()
    getTransactionsListFunc()
    getAccountsListFunc()
})
</script>
